<template>
    <div style="height: 100%;width: 100%">
        <div style="height:10%;">

            <el-card class="input-card">
                <el-input
                        class="queryInput"
                        placeholder="请输入查询标题内容"
                        prefix-icon="el-icon-search"
                        @blur="queryByCondition"
                        v-model="queryTitleLike">
                </el-input>
            </el-card>

        </div>

        <!--                所有的博客展示界面-->
        <div style="height: 80%">
            <el-row  type="flex" justify="space-around"  style="flex-wrap: wrap;height: 100%;width: 100%">
                <el-col :span="6"  v-for="blog in allBlogs" :key="blog.id" style="height: 30%">
                    <el-card class="blog-card" >
                        <div slot="header" class="clearfix" >
                            <el-button type="text" @click="toBlogView(blog.id)">{{blog.title}}<i class="el-icon-view el-icon--right"></i></el-button>
                        </div>
                        <div class="twoline" style="height: 78px;">
                            {{blog.content}}
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>


        <!--            下方的分页部分-->
        <div style="height: 10%;background: #0aaeb3;margin-top: 10px">
            <el-card class="page-card">
                <el-pagination
                        @size-change="changePageSize"
                        @current-change="changePageIndex"
                        :page-sizes="[4 , 8 , 12]"
                        :page-size="12"
                        :pager-count="5"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="totalBlogNum">
                </el-pagination>
            </el-card>
        </div>
    </div>
</template>

<script>

    export default {
        name: "BlogView",
        data(){
            return{
                allBlogs:{},  //所有的博客信息
                pageIndex:1,    //当前页序号
                pageSize:12,    //当前页面大小
                queryTitleLike:"",  //根据title模糊查询
                totalBlogNum:0,     //总的博客数目

            }
        },
        created() {
            this.queryAllBlogs();
        },
        methods:{
            //查询所有的博客信息
            queryAllBlogs() {
                this.request.get("/index/blog/queryAllBlogs",{
                    params:{
                        pageIndex:this.pageIndex,
                        pageSize:this.pageSize,
                        queryTitleLike:this.queryTitleLike,
                    }
                }).then(res => {
                    if (res.code=='200'){
                        this.allBlogs=res.data.blogs;
                        this.totalBlogNum=res.data.totalBlogNum;

                    }
                })
            },
            //条件模糊查询博客
            queryByCondition(){
                this.queryAllBlogs();
            },
            //改变分页中的页面大小
            changePageSize(newPageSize){
                this.pageSize=newPageSize;
                this.queryAllBlogs();
            },
            //改变当前页的序号
            changePageIndex(newPageIndex){
                this.pageIndex=newPageIndex;
                this.queryAllBlogs();
            },
            //跳转到查看博客界面
            toBlogView(id){
                this.$router.push({
                    path: '/frontFramework/blogView',
                    query: {
                        id: id,
                    }
                })
            }
        }
    }
</script>

<style scoped>


    .blog-card{
        height: 100%;
        width: 300px;
        margin-top: 20px;
    }

    /*超过两行省略号*/
    .twoline{
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
    }

    .input-card{
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
    }

    .page-card{
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

</style>
